import QtQuick 1.0
import "models"
import "templates"
//import "js/main.js" as MainManager

Item {
    id: shoppingListsContainer

    property alias yFormAdd: addItemForm.y
    property alias shoppingListModel: shoppingListModel

    Component {
        id: listSection

        ListItem {
            id: listItem
            scale: 1

            name: itemName
            //price: itemPrice
            //currency: itemCurrency

            height: 80; width: 360

            //set ID and index of the element
            Component.onCompleted: {
                index =  itemIndex
                iId = itemId
            }

            //Mouse area for shopping list details
            MouseArea {
                width: 300; height: parent.height;
                anchors.left: parent.left
                onClicked: {
                    mainContainer.listIdMain = iId;
                    mainContainer.listNameMain = name;
                    mainContainer.state = "shoppingItemsState"
                }
            }

            //Mouse area for delete button
            MouseArea {
                id: deleteButton
                width: 60; height: parent.height;
                anchors.right: parent.right

                onClicked: {
                    //set delete state for anumation
                    listItem.state = "deleteSate"
                    //start timer
                    deleteTimer.running = true
                }

            }

            //timer used for regenerating the list after delete animation ends (~900 ms)
            Timer {
                id: deleteTimer
                interval: 900; running: false; repeat: false; triggeredOnStart: false;
                onTriggered: {
                    shoppingListModel.remove(index)
                    mainContainer.getManager().deleteList(iId, shoppingListModel)
                    //shoppingListModel.sync();
                }
            }

            //Delete state, used as a triger for delete item animation
            states: State {
                name: "deleteState"
            }

            //transition for delete item
            transitions: Transition {
                from: "*"; to: "*"
                SequentialAnimation {
                    PropertyAction { target: listItem; property: "ListView.delayRemove"; value: true }
                    NumberAnimation { target: listItem; property: "scale"; to: 0.6; duration: 400; easing.type: Easing.OutElastic }
                    NumberAnimation { target: listItem; property: "x"; to: 800; duration: 400; easing.type: Easing.InBack }
                    PropertyAction { target: listItem; property: "ListView.delayRemove"; value: false }
                }
            }
        }
    }

    ListModel {
        id: shoppingListModel

        Component.onCompleted: {
            mainContainer.getManager().generateListItemsModel(shoppingListModel);
        }
    }

    ListView {
        id: shoppingLists
        height: parent.height; width: parent.width
        model: shoppingListModel
        delegate: listSection

        states: [
            State {
                name: "ShowBars"
                when: shoppingLists.movingVertically || shoppingLists.movingHorizontally
                PropertyChanges { target: verticalScrollBar; opacity: 1 }
                //PropertyChanges { target: horizontalScrollBar; opacity: 1 }
            }
        ]

        transitions: [
            Transition {
                NumberAnimation { properties: "opacity"; duration: 500 }
            },
            Transition {
                NumberAnimation { property: "x"; duration: 500 }
            }
        ]
    }

    //add shopping list form
    Rectangle {
        id: addItemForm
        anchors.left: parent.left;
        y: 640
        width: parent.width; height: 122;
        color: "#80000000"


        MouseArea {
            anchors.fill: parent
        }

        Rectangle {
            id: topBorderLine
            height: 3
            width: parent.width
            anchors.top: parent.top
            anchors.left: parent.left
            color: "#b6d051"
        }

        InputText {
            id: listNameInput
            inputWidth: 340
            inputPlaceholder: "List name"

            anchors {
                left: parent.left; leftMargin: 10
                top: parent.top; topMargin: 10
            }
        }

        Row {
            id: addItemFormButtonConainer
            spacing: 10
            anchors {
                right: parent.right; rightMargin: 10
            }
            y: 66

            Button {
                buttonText: "Add"
                buttonWidth: 80

                onActivated: {
                    mainContainer.getManager().setList(listNameInput.inputTextValue, shoppingListModel);
                    footerContainer.state = "active"
                    listNameInput.resetState = "resetInput";
                }
            }

            Button {
                buttonText: "Cancel"
                buttonWidth: 80

                onActivated: {
                    footerContainer.state = "active"
                    listNameInput.resetState = "resetInput";
                }
            }
        }

        Behavior on y {
            PropertyAnimation { properties: "y"; easing.type: Easing.Linear }
        }


    }

    ScrollBar {
        id: verticalScrollBar
        width: 6; height: shoppingLists.height-6
        anchors.right: parent.right
        anchors.top: parent.top
        opacity: 0
        orientation: Qt.Vertical
        position: shoppingLists.visibleArea.yPosition
        pageSize: shoppingLists.visibleArea.heightRatio
    }
}
